<template>
    <view class="exercise-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">运动情况记录</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 运动类型选择 -->
            <view class="input-group">
                <text class="input-label">运动类型</text>
                <u-dropdown>
                    <u-dropdown-item v-model="exerciseData.type" :title="exerciseType"
                        :options="exerciseTypes"></u-dropdown-item>
                </u-dropdown>
            </view>

            <!-- 运动时长 -->
            <view class="input-group">
                <text class="input-label">运动时长 (分钟)</text>
                <u-number-box v-model="exerciseData.duration" min="0" max="300" step="5"></u-number-box>
                <view class="input-tips">
                    <text>建议每天运动30-60分钟</text>
                </view>
            </view>

            <!-- 运动强度 -->
            <view class="input-group">
                <text class="input-label">运动强度</text>
                <u-radio-group v-model="exerciseData.intensity">
                    <u-radio label="低强度" name="low"></u-radio>
                    <u-radio label="中等强度" name="medium"></u-radio>
                    <u-radio label="高强度" name="high"></u-radio>
                </u-radio-group>
                <view class="input-tips">
                    <text>低强度：散步、慢走；中等强度：快走、慢跑；高强度：跑步、HIIT</text>
                </view>
            </view>

            <!-- 卡路里消耗 -->
            <view class="input-group">
                <text class="input-label">卡路里消耗 (kcal)</text>
                <u-input v-model="exerciseData.calories" type="number" placeholder="请输入消耗卡路里" />
            </view>

            <!-- 步数 -->
            <view class="input-group">
                <text class="input-label">步数</text>
                <u-input v-model="exerciseData.steps" type="number" placeholder="请输入步数" />
                <view class="input-tips">
                    <text>建议每天步数8000-10000步</text>
                </view>
            </view>

            <!-- 运动时间 -->
            <view class="input-group">
                <text class="input-label">运动时间</text>
                <u-datetime-picker v-model="exerciseData.exerciseTime" mode="datetime"></u-datetime-picker>
            </view>

            <!-- 运动感受 -->
            <view class="input-group">
                <text class="input-label">运动感受</text>
                <u-rate v-model="exerciseData.feeling" count="5" active-color="#ff9600"></u-rate>
            </view>

            <!-- 备注 -->
            <view class="input-group">
                <text class="input-label">备注</text>
                <u-textarea v-model="exerciseData.notes" placeholder="填写其他相关情况" count maxlength="200"></u-textarea>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存记录" :customStyle="{ backgroundColor: '#58cc02' }"
                @click="saveRecord"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            exerciseData: {
                type: 'walking', // 默认运动类型
                duration: 30, // 运动时长(分钟)
                intensity: 'medium', // 运动强度
                calories: '', // 卡路里消耗
                steps: '', // 步数
                exerciseTime: Date.now(), // 默认为当前时间
                feeling: 3, // 运动感受(1-5分)
                notes: '' // 备注
            },
            exerciseTypes: [
                {
                    value: 'walking',
                    label: '走路/散步'
                },
                {
                    value: 'running',
                    label: '跑步'
                },
                {
                    value: 'cycling',
                    label: '骑行'
                },
                {
                    value: 'swimming',
                    label: '游泳'
                },
                {
                    value: 'fitness',
                    label: '健身'
                },
                {
                    value: 'yoga',
                    label: '瑜伽'
                },
                {
                    value: 'dance',
                    label: '舞蹈'
                },
                {
                    value: 'basketball',
                    label: '篮球'
                },
                {
                    value: 'football',
                    label: '足球'
                },
                {
                    value: 'other',
                    label: '其他'
                }
            ]
        }
    },
    computed: {
        exerciseType() {
            const selected = this.exerciseTypes.find(item => item.value === this.exerciseData.type)
            return selected ? selected.label : '请选择运动类型'
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack()
        },
        // 保存记录
        saveRecord() {
            // 验证表单
            if (this.exerciseData.duration <= 0) {
                uni.showToast({
                    title: '请输入有效的运动时长',
                    icon: 'none'
                })
                return
            }

            // 处理数据保存
            console.log('保存运动数据:', this.exerciseData)

            // TODO: 调用API保存数据

            // 显示成功提示
            uni.showToast({
                title: '记录保存成功',
                icon: 'success',
                success: () => {
                    // 延迟返回
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            })
        }
    }
}
</script>

<style lang="scss">
$duolingo-green: #58cc02;
$duolingo-orange: #ff9600;

.exercise-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>